<nav class="SidebarNav" id="SidebarNav">

  <a
    href="/"
    class="NavLink {{#is pagename "===" "Dashboard"}}-active{{/is}}">
    <i class="fa fa-home NavIcon"></i>
    <span>
      Dashboard
    </span>
  </a>



  <div
    class="NavGroup {{#is pagename "in" "ItemsList,ItemsEditor"}}-open{{/is}}">
    <a
      href=""
      class="NavLink">
      <i class="fa fa-th-large NavIcon"></i>
      <span>
        Items Manager
      </span>
    </a>
    <nav class="Nav">
      <div class="CompactNavGroupHeader">
        <h4 class="NavTitle">
          Items Manager
        </h4>
        <a href="" class="Button -dismiss DismissBtn">
          <i class="fa fa-times Icon"></i>
        </a>
      </div>
      <a
        href="/Items/ItemsList.html"
        class="NavLink {{#is pagename "===" "ItemsList"}}-active{{/is}}" >
        Items List
      </a>

      <a
        href="/Items/ItemsEditor.html"
        class="NavLink {{#is pagename "===" "ItemsEditor"}}-active{{/is}}">
        Items Editor
      </a>
    </nav>
  </div>

  <a
    href="/"
    class="NavLink {{#is pagename "===" "Metrics"}}-active{{/is}}">
    <i class="fa fa-pie-chart NavIcon"></i>
    <span>
      Metrics
    </span>
  </a>

  <div
    class="NavGroup {{#is pagename "in" "Items/List,Items/Editor"}}-open{{/is}}">
    <a href="/" class="NavLink">
      <i class="fa fa-file-text-o NavIcon"></i>
      <span>
        Other Pages
      </span>
    </a>
    <nav class="Nav">
      <div class="CompactNavGroupHeader">
        <h4 class="NavTitle">
          Other Pages
        </h4>
        <a href="" class="Button -dismiss DismissBtn">
          <i class="fa fa-times Icon"></i>
        </a>
      </div>

      <a
        href="/Pages/Profile.html"
        class="NavLink" >
        Profile
      </a>

      <a
        href="/Pages/Settings.html"
        class="NavLink" >
        Settings
      </a>


      <a
        href="/Pages/Search.html"
        class="NavLink {{#is pagename "===" "Pages/Search"}}-active{{/is}}">
        Search Results
      </a>

      <a
        href="/Pages/Error.html"
        class="NavLink {{#is pagename "===" "Pages/Error"}}-active{{/is}}">
        Error Page
      </a>

      <a
        href="/Auth/Login.html"
        class="NavLink" >
        Login
      </a>

      <a
        href="/Auth/Signup.html"
        class="NavLink" >
        Signup
      </a>

      <a
        href="/Auth/Recover.html"
        class="NavLink" >
        Password Recover
      </a>


    </nav>
  </div>


  <div class="Divider"></div>

  <div class="NavGroup {{#is pagename "in" "Forms"}}-open{{/is}}">
    <a href="" class="NavLink">
      <i class="fa fa-edit NavIcon"></i>
      <span>
        Forms
      </span>
    </a>
    <nav class="Nav">
      <div class="CompactNavGroupHeader">
        <h4 class="NavTitle">
          Forms
        </h4>
        <a href="" class="Button -dismiss DismissBtn">
          <i class="fa fa-times Icon"></i>
        </a>
      </div>
      <a
        href="Forms.html"
        class="NavLink {{#is pagename "===" "Forms"}}-active{{/is}}" >
        <span>
          Basic Forms
        </span>
      </a>
    </nav>
  </div>

  <div class="NavGroup">
    <a href="" class="NavLink">
      <i class="fa fa-list-ul NavIcon"></i>
      <span>
        Tables and Lists
      </span>
    </a>
    <nav class="Nav">
      <div class="CompactNavGroupHeader">
        <h4 class="NavTitle">
          Tables and Lists
        </h4>
        <a href="" class="Button -dismiss DismissBtn">
          <i class="fa fa-times Icon"></i>
        </a>
      </div>
      <a href="/TablesAndLists/BasicTables.html" class="NavLink" >
        <span>
          Basic Tables
        </span>
      </a>
      <a href="/TablesAndLists/ResponsiveTables.html" class="NavLink" >
        <span>
          Responsive Tables
        </span>
      </a>
      <a href="http://localhost:8080/TablesAndLists/ResponsiveLists.html" class="NavLink" >
        <span>
          Responsive Lists
        </span>
      </a>
    </nav>
  </div>

  <div class="NavGroup {{#is pagename "in" "Charts/ChartJS,Charts/Morris"}}-open{{/is}}">
    <a href="" class="NavLink {{#is pagename "in" "aCharts/ChartJS,aCharts/Morris"}}-active{{/is}}">
      <i class="fa fa-area-chart NavIcon" ></i>
      <span>
        Charts
      </span>
    </a>
    <nav class="Nav">
      <div class="CompactNavGroupHeader">
        <h4 class="NavTitle">
          Charts
        </h4>
        <a href="" class="Button -dismiss DismissBtn">
          <i class="fa fa-times Icon"></i>
        </a>
      </div>
      <a
        href="Charts/ChartJS.html"
        class="NavLink {{#is pagename "===" "Charts/ChartJS"}}-active{{/is}}" >
        <span>
          ChartJS
        </span>
      </a>
      <a
        href="Charts/Morris.html"
        class="NavLink {{#is pagename "===" "Charts/Morris"}}-active{{/is}}" >
        <span>
          Morris
        </span>
      </a>
    </nav>
  </div>


  <div class="NavGroup {{#is pagename "in" "UIComponentsTypography"}}-open{{/is}}">

    <a href="/" class="NavLink">
      <i class="fa fa-desktop NavIcon"></i>
      <span>
        UI Components
      </span>
    </a>
    <nav class="Nav">
      <div class="CompactNavGroupHeader">
        <h4 class="NavTitle">
          UI Components
        </h4>
        <a href="" class="Button -dismiss DismissBtn">
          <i class="fa fa-times Icon"></i>
        </a>
      </div>
      <a href="" class="NavLink">
        Color Palette
      </a>

      <a
        href="/UIComponents/Typography.html"
        class="NavLink {{#is pagename "===" "UIComponentsTypography"}}-active{{/is}}">
        Typography
      </a>

      <a href="/UIComponents/Grid.html"
         class="NavLink" {{#is pagename "===" "UIComponentsGrid"}}-active{{/is}}>
        Grid
      </a>

      <a href="" class="NavLink">
        Dropdowns
      </a>

      <a href="" class="NavLink">
        Modals
      </a>

      <a href="" class="NavLink">
        Buttons
      </a>

      <a href="" class="NavLink">
        Cards
      </a>

      <a
        href="/UIComponents/Utils.html"
        class="NavLink {{#is pagename "===" "UIComponents/Utils"}}-active{{/is}}">
        <span>
          Utils
        </span>
      </a>

      <div class="NavGroup">
        <a href="" class="NavLink">
          {{!-- <i class="fa fa-sitemap NavIcon"></i> --}}
          <span>
            Multi Level Menu
          </span>
        </a>
        <nav class="Nav">
          <h4 class="CompactNavGroupName">
            Multi Level Menu
            <a href="" class="Button ButtonDismiss DismissBtn">
              <i class="fa fa-times Icon"></i>
            </a>
          </h4>

          <a href="" class="NavLink" >
            Level Two
          </a>

          <div class="NavGroup">
            <a href="" class="NavLink">
              Level Two
            </a>

            <nav class="Nav">
              <div class="NavGroup">
                <a href="" class="NavLink">
                  Level Three
                </a>

                <nav class="Nav">
                  <a href="" class="NavLink">
                    Level Four
                  </a>

                  <a href="" class="NavLink">
                    Level Four
                  </a>
                </nav>
              </div>

              <a href="" class="NavLink">
                Level Three
              </a>
            </nav>
          </div>

        </nav>
      </div>
    </nav>
  </div>


  <div class="Divider"></div>

  <a href="/" class="NavLink">
    <i class="fa fa-github-alt NavIcon -color-light-green-400"></i>
    <span>
      Theme Docs
    </span>
  </a>

  <a href="" class="NavLink">
    <i class="fa fa-code NavIcon -color-light-blue-300"></i>
    <span>
      Other Versions
    </span>
  </a>

</nav>
